 <!-- TradeExecution 交易执行 -->
<script setup lang='ts'>
import { ref, computed, Transition, reactive, onMounted, nextTick } from "vue";
import { useTradeExecution } from "./hook/TradeExecution";
import { PureTableBar } from "@/components/RePureTableBar";
const {
  loading,
  dataList,
  columns,
  Visible,
  clientform,
  clientName,
  clientList,
  pagination,
  tableDesgin,
  VisibleDesgin,
  ViewVisibleDesgin,
  OpenVisible,
  stubim_form,
  closefrom,
  handleSizeChange,
  handsleCurrentChange
} = useTradeExecution();
const tabsActive = ref<number>(1);
function handleCurrentChange(row) {
  clientform.value.protfolioDatas.map(rl => {
    if (rl.portfolioId == row.portfolioId) return;
    rl.price = null;

    // rl.status = true;
  })
  // row.status = false;
}
</script>

<template>
  <div class="main">
    <PureTableBar class="list_hei">
      <template #buttons>
        <el-form-item label="客户群">
          <el-select v-model="clientName" placeholder="请选择" value-key="clientBaseName">
            <el-option v-for="(item, l) in clientList" :key="l" :label="item.clientBaseName" :value="item" />
          </el-select>
        </el-form-item>
        &nbsp; &nbsp;
        <el-button type="primary" @click="OpenVisible()"> 匹配投资组合 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          max-height="600" :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
          @size-change="handleSizeChange" @current-change="handsleCurrentChange" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
        </pure-table>
      </template>
    </PureTableBar>
    <ReDialog :width="800" :height="550" :models="Visible" @Closes="closefrom()">
      <template #header>
        <h2 style="text-align: center;">投资组合</h2>
      </template>
      <template #main>
        <div class="Visible">
          <p class="Visible_tips1">
            您所属客户群的风险等级为：
          <h2 class="Visible_tips2 text-blue-600">
            {{ clientform.clientBaseRiskType }}
          </h2>
          </p>

          <div class="Visible_table">
            <div class="show_tabs">
              <div class="tabs_one">
                <div v-for="(item, index) in clientform.configDatas" :key="item.portfolioId">
                  <h3 class="mb-4 mt-4">资产配置方案：<span class="text-blue-600">{{ item.projectName }}</span> </h3>
                  <div class="content_lists">
                    <div class="content_listt">
                      <div class="yqsyl" :id="'yqsyl' + index">

                      </div>
                      <div class="yqsyl" :id="'yqbdl' + index"></div>
                      <!-- <dl>
                        <dd>预期收益率：<span class="text-blue-600">{{ item.expectedYield }}%</span></dd>
                        <dd>预期波动率：<span class="text-blue-600">{{ item.expectedVolatility }}%</span></dd>
                      </dl> -->
                    </div>
                    <div class="content_list">
                      <div v-show="Visible" class="Visible__echart" :id="'content' + index"></div>
                    </div>
                  </div>
                </div>
              </div>
              <hr style="border-color:#e9e9e9 ;">
              <br>
              <div class="tabs_tow">
                <el-form-item label="购买日期">
                  <el-date-picker v-model="clientform.createTime" type="date" placeholder="请选择日期" />
                </el-form-item>
                <el-table border :data="clientform.protfolioDatas" style="width: 100%">
                  <!-- <el-table-column type="selection" width="55" /> -->
                  <el-table-column type="index" label="序号" width="65" />
                  <el-table-column prop="portfolioldName" label="投资组合" />
                  <el-table-column prop="recommendedHold" label="建议持有期限" width="120" />
                  <el-table-column prop="annualYield" label="模拟收益率(%)" width="120" />
                  <el-table-column prop="annualizedVolatility" label="模拟波动率(%)" width="120" />
                  <el-table-column label="购买金额(元)" width="120">
                    <template #default="scope">
                      <el-input type="number" class="custom-input" @click="handleCurrentChange(scope.row)"
                        v-model.number="scope.row.price" />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button size="small" @click="ViewVisibleDesgin(scope.row)" text>详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="stubim_form()"> 购买 </el-button>
          <el-button @click="closefrom()"> 取消 </el-button>
        </span>
      </template>
    </ReDialog>

    <ReDialog :width="580" :height="250" :models="VisibleDesgin" @Closes="VisibleDesgin = false">
      <template #header>
      </template>
      <template #main>
        <table class="view_table">
          <tr v-for="(item, index) in tableDesgin" :key="index">
            <td class="view_table_td1">{{ item.typeName }}({{ item.typeProportion }})</td>
            <td class="view_table_td2">
              <table class="view_table2">
                <tr v-for="(t, l) in item.items" :key="l">
                  <td class="view__td21">{{ t.fundName }}</td>
                  <td class="view__td22">{{ t.proportionOfInvestment }}</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </template>
    </ReDialog>

    <!-- <el-dialog v-model="VisibleDesgin" width="30%" :close-on-click-modal="false">
      <table class="view_table">
        <tr v-for="(item, index) in tableDesgin" :key="index">
          <td class="view_table_td1">{{ item.typeName }}({{ item.typeProportion }}%)</td>
          <td class="view_table_td2">
            <table class="view_table2">
              <tr v-for="(t, l) in item.items" :key="l">
                <td class="view__td21">{{ t.fundName }}</td>
                <td class="view__td22">{{ t.proportionOfInvestment }}%</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </el-dialog> -->
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

.custom-input .el-input-number__increase,
.custom-input .el-input-number__decrease {
  display: none;
}

.Visible {
  width: 95%;
  margin: 0 auto;
  text-align: left;

  .Visible_tips1 {
    line-height: 32px;
    font-weight: bold;
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .Visible_tips2 {
    // line-height: 38px;
    font-weight: bold;
    // margin-bottom: 20px;
  }
}

.tabs_btn {
  display: flex;
  align-items: center;
  margin-bottom: 15px;

  span {
    padding: 10px 25px;
    font-size: 16px;
    font-weight: bold;
    margin: 0 15px;
    cursor: pointer;
    border-bottom: 1px solid #fff;
  }

  span.active {
    border-color: #6395fa;
  }

}

.show_tabs {
  .tabs_one {
    .content_lists {
      display: flex;
      margin-top: 20px;
      margin-bottom: 20px;
      align-items: center;
    }

    .content_listt {
      width: 35%;
      line-height: 32px;

      // dl {
      //   height: 100%;
      // }

      // dt {
      //   font-size: 16px;
      //   font-weight: bold;
      // }

      .yqsyl {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        // text-align: center;
        // border: 1px solid;
      }
    }

    .content_list {
      width: 65%;

      .Visible__echart {
        width: 100%;
        height: 100%;
      }
    }

    .content_list {
      height: 300px;
    }
  }
}

.view_table {
  width: 100%;
  border: 1px solid #ccc;

  td {
    border: 1px solid #ccc;
  }

  .view_table_td1 {
    width: 30%;
  }

  .view_table_td2 {
    width: 70px;
  }

  .view_table2 {
    width: 100%;

    td {
      width: 50%;
    }
  }
}

:deep(.el-dialog__footer) {
  text-align: center;
}
</style>
